<template>
    <div>
        <loginTop title="登录">
            <div slot="right" @click="$router.push('/register')">注册</div>
        </loginTop>
        <loginText label="用户名" placeholder="用户名不少于2个字符" style="margin: 15px 0"
                   @inputChange="content=> params.name =content"></loginText> <!--和事件绑定的方法不需要带()-->
        <loginText label="密码" type="password" placeholder="密码不少于8个字符"
                   @inputChange="content=> params.password =content"></loginText>
        <div class="login-section">
            <div @click="$router.push('/faceLogin')">
                <span>人脸识别登录</span>
                <van-icon class="faceLogin-icon" name="exchange"></van-icon>
            </div>
        </div>
        <login-btn text="登录" @registerSubmit="register"></login-btn>
    </div>
</template>
<script>
    import loginTop from "@/components/common/loginTop.vue"
    import loginText from "@/components/common/loginText.vue";
    import loginBtn from "@/components/common/loginBtn";

    export default {
        data() {
            return {
                params: {name: '', password: ''}
            }
        },
        name: "register",
        components: {
            loginTop,
            loginText,
            loginBtn
        },
        methods: {
            successInp(content) { // 这个content是在 loginText里面发送的事件 附带的值
                console.log(content)
            },
            async register() {
                const rule = RegExp("^.{2,16}$")
                const rule2 = RegExp("^.{8,16}$")
                if (rule.test(this.params.name) && rule2.test(this.params.password)) {
                    const res = await this.$http.post('/user/login', this.params)
                    this.$msg.fail(res.data.message)
                    if (res.data.code == 0) {
                        localStorage.setItem("token", res.data.data.token)
                        this.$http.get("/user/userinfo").then((res) => {
                            localStorage.setItem("userInfo", JSON.stringify(res.data.data))
                        })
                        setTimeout(() => {
                            this.$router.go(-1)
                        }, 1000)
                    }
                } else {
                    this.$msg.fail("格式不正确")
                }
            }
        }
    }
</script>

<style lang="scss">
    loginText {
        margin: 4.17vw;
    }

    .login-section {
        position: relative;
        /*display: flex;*/
        /*flex-direction: column;*/
        /*justify-content: left;*/
        height: 30px;

        > div {
            display: flex;
            align-items: center;
            position: absolute;
            justify-content: center;
            top: 10px;
            right: 15px;
            height: 30px;
            border-radius: 5px;
            color: #aaaaaa;
            width: 130px;
            background: #b3d4fc;

            .faceLogin-icon {
                color: green;
                margin-left: 4px;
            }
        }
    }
</style>